{% extends "base.html" %}

{% block title %}上传文档 - AsciiDoc文档平台{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h1 class="mb-4">
                <i class="fas fa-upload me-2"></i>
                上传新文档
            </h1>
            
            <div class="card">
                <div class="card-body">
                    <form id="uploadForm" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="fileInput" class="form-label">
                                <i class="fas fa-file-alt me-1"></i>
                                选择AsciiDoc文件
                            </label>
                            <input type="file" class="form-control" id="fileInput" name="file" 
                                   accept=".adoc,.asciidoc,.asc" required>
                            <div class="form-text">
                                支持的格式：.adoc, .asciidoc, .asc (最大16MB)
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="titleInput" class="form-label">文档标题</label>
                            <input type="text" class="form-control" id="titleInput" name="title" 
                                   placeholder="输入文档标题">
                        </div>
                        
                        <div class="mb-3">
                            <label for="descriptionInput" class="form-label">文档描述</label>
                            <textarea class="form-control" id="descriptionInput" name="description" 
                                      rows="3" placeholder="简要描述文档内容"></textarea>
                        </div>
                        
                        <div class="mb-3">
                            <label for="authorInput" class="form-label">作者</label>
                            <input type="text" class="form-control" id="authorInput" name="author" 
                                   placeholder="输入作者名称" value="匿名用户">
                        </div>
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{{ url_for('index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>取消
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fas fa-upload me-1"></i>上传文档
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 进度条 -->
            <div class="mt-3" id="progressContainer" style="display: none;">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" style="width: 0%" id="progressBar">
                        0%
                    </div>
                </div>
                <div class="text-center mt-2" id="progressText">准备上传...</div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('uploadForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData();
    const fileInput = document.getElementById('fileInput');
    const titleInput = document.getElementById('titleInput');
    const descriptionInput = document.getElementById('descriptionInput');
    const authorInput = document.getElementById('authorInput');
    
    if (!fileInput.files[0]) {
        alert('请选择要上传的文件！');
        return;
    }
    
    formData.append('file', fileInput.files[0]);
    formData.append('title', titleInput.value);
    formData.append('description', descriptionInput.value);
    formData.append('author', authorInput.value);
    
    // 显示进度条
    document.getElementById('progressContainer').style.display = 'block';
    document.getElementById('submitBtn').disabled = true;
    
    try {
        const response = await fetch('{{ url_for("upload") }}', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            alert('文档上传成功！');
            window.location.href = result.redirect;
        } else {
            alert('上传失败：' + result.error);
        }
    } catch (error) {
        alert('上传出错：' + error.message);
    } finally {
        document.getElementById('submitBtn').disabled = false;
    }
});

// 文件名自动填充标题
document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file && !document.getElementById('titleInput').value) {
        const filename = file.name;
        const title = filename.replace(/\.(adoc|asciidoc|asc)$/i, '');
        document.getElementById('titleInput').value = title;
    }
});
</script>
{% endblock %}
